<template>
  <div>
      <div ref="init" style="height:100px">11</div>
    <div>
      <div style="display:flex;align-items: center;margin-bottom:10px">
        起止章节<div>
          <el-select v-model="value" placeholder="请选择" size="mini">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div>
          <el-select v-model="value1" placeholder="请选择" size="mini">
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div style="margin-left:10px">
          <el-button @click="cx()" size="mini">查询</el-button>
        </div>
      </div>
      <div ref="myChart" :style="{width: '100%', height: '300px',margin:'0px auto'}"></div>
    </div>
    <div style="margin-top:20px">
      <div style="display:flex;align-items: center;margin-bottom:10px">
        起止章节<div>
          <el-select v-model="value" placeholder="请选择" size="mini">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        --
        <div>
          <el-select v-model="value1" placeholder="请选择" size="mini">
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div style="margin-left:10px">
          <el-button @click="cx()" size="mini">查询</el-button>
        </div>
      </div>
      <div ref="myChart1" :style="{width: '100%', height: '300px',margin:'0px auto'}"></div>

    </div>
    div
  </div>
</template>
<script>
export default {
  data() {
    return {
      data1: new Array(10).fill().map((v, i) => {
        return i * ((Math.floor(Math.random() * 1000 - 1) + 1))
      }),
      data2: new Array(10).fill().map((v, i) => {
        return i * ((Math.floor(Math.random() * 1000 - 1) + 1))
      }),
      data3: new Array(10).fill().map((v, i) => {
        return i * ((Math.floor(Math.random() * 1000 - 1) + 1))
      }),
      data4: new Array(10).fill().map((v, i) => {
        return i * ((Math.floor(Math.random() * 1000 - 1) + 1))
      }),
      data5: ['第一章', '第二章', '第三章', '第四章', '第五章', '第六章', '第七章', '第八章', '第九章', '第十章'],
      options: new Array(10).fill().map((v, i) => {
        return { value: '选项' + i, id: i, label: '第' + i + '章' }
      }),
      value: '',
      options1: new Array(10).fill().map((v, i) => {
        return { value: '选项' + i, id: i, label: '第' + i + '章' }
      }),
      value1: ''
    }
  },
  created() {
  
    this.$nextTick(() => {
      this.drawLine()
      this.drawLine1()
    })
    // console.log(this.data5);

  },
    mounted() {
      let height = this.$refs.init.offsetHeight;
      // console.log(height);
    },
  methods: {
    cx() {
      if (this.value == '选项1' && this.value1 == '选项3') {
        this.data5 = ['第一章', '第二章', '第三章']
        this.drawLine()
      }
    },
    drawLine() {

      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart)
      // 绘制图表
      myChart.setOption({
        title: {
          text: '作品章节数据'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          icon: 'circle',
          itemHeight: 10,
          itemWidth: 20,
          data: ['阅读人数', '订阅人数', '点击次数', '笔记数量'],
          padding: [
            10, // 上
            20, // 右
            10, // 下
            20],
          borderRadius: 50,
          backgroundColor: '#fff',
          borderColor: '#ccc',
          borderWidth: 1
        },
        color: ['#FF9E9E', '#FFD59E', '#9FD786', '#7FB9EC'],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.data5,
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '阅读人数',
            type: 'line',
            stack: 'Total',
            data: this.data1
          },
          {
            name: '订阅人数',
            type: 'line',
            stack: 'Total',
            data: this.data2
          },
          {
            name: '点击次数',
            type: 'line',
            stack: 'Total',
            data: this.data3
          },
          {
            name: '笔记数量',
            type: 'line',
            stack: 'Total',
            data: this.data4
          },
        ]
      });
      //  document.getElementById('myChart').setAttribute('_echarts_instance_', '');
    },
    drawLine1() {
      // 基于准备好的dom，初始化echarts实例
      let myChart1 = this.$echarts.init(this.$refs.myChart1)
      myChart1.setOption({
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            // console.log(params);
            let name = params.name
            let value = params.value + "%"
            let zs = name + '<br>' + '追读率' + value
            return zs
            // let value = params[0].value;
            // value = (value * 100).toFixed(4) + "%";
            // return value;
          }


          // axisPointer: {
          //     type: 'shadow'
          // }
        },
        grid: {
          left: '5%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.data5,
          axisTick: {
            show: false
          },

        },
        color: ['black'],
        yAxis: {
          //  nameGap:1000,
          type: 'value',
          axisLabel: { //y轴设置为%
            show: true,
            interval: 'auto',
            formatter: '{value} %'
            // padding:[10,0,200,0]
          },
          // boundaryGap : [ 10, 10 ],
          max: 100,  //最大值
          min: 0//最小值
        },
        series: [{
          type: 'line',
          // name: '追读率', type: 'bar', 
          data: [100, 10, 20, 30, 40, 50, 60, 70, 5, 55],
          markPoint: {
            symbol: 'rect', //标记(气泡)的图形        
            symbolSize: [80, 30],
            symbolOffset: ['45%', '-40%'],
            // symbol: 'image://https://img0.baidu.com/it/u=3798217922,3880088897&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
            //标记(气泡)的大小 
            label: {
              formatter: '{b}:{c}%'
              //  fontSize:12,
              //  color:'black'
            },
            itemStyle: {
              color: '#454545', //图形的颜色。                     
              borderColor: '#454545',//图形的描边颜色。支持的颜色格式同 color，不支持回调函数。                     
              borderWidth: 0,//描边线宽。为 0 时无描边。                     b
              orderType: 'dotted' //柱条的描边类型，默认为实线，支持 ‘solid’, ‘dashed’, ‘dotted’。                  
            },
            data: [{ type: 'max', name: '最高' }, { type: 'min', name: '最低' }]
          },
          markLine: {
            // 不显示箭头
            symbol: 'none',
            label: {
              formatter: '{b}:{c}%',
              position: 'start',
              color: 'black',
              backgroundColor: '#ffcECE',
              padding: [5, 10, 5, 10],
              borderRadius: 50
              // distance:[0,-80]
            },
            // z:999,
            itemStyle: { color: '#FFCECE' }, data: [{ type: 'average', name: '平均' }]
          },

        }]

      })
    }
  },
}
</script>
<style scoped lang='scss'>
</style>